<template>
  <view class="main">
    <view :class="[cardData.verified ? 'card-head' : 'card-head card-head-v']">
      <image
        class="bg"
        src="../../images/mine/mine-bg.png"
        mode="scaleToFill"
      ></image>
      <view class="card-edit">
        <navigator
          class="toEdit"
          url="/pages/per_center/editData"
          hover-class="none"
          >编辑</navigator
        >
      </view>
      <view class="info">
        <view class="info-top" @tap="toCard">
          <image
            class="avatar"
            :src="cardData.avatarUrl"
            mode="aspectFill"
          ></image>
          <view class="info-right">
            <view class="h3">{{ cardData.realName }}</view>
            <view class="h6">
              <text class="company" v-if="cardData.company">{{
                cardData.company
              }}</text>
              <text class="poster" v-if="cardData.post">{{
                cardData.post
              }}</text>
            </view>
          </view>
        </view>
        <view class="info-center" v-if="cardData.verified">
          <image src="../../imges/various.png" mode="widthFix"></image>
          <text>{{ cardData.verified }}</text>
        </view>
        <view
          :class="[
            cardData.verified ? 'info-bottom' : 'info-bottom info-bottom-v',
          ]"
        >
          <navigator
            class="item"
            :url="'/pages/per_center/wallet?yue=' + money"
            hover-class="none"
          >
            <text
              >￥{{
                cardData.balance || cardData.notReceivedBalance ? money : 0
              }}</text
            >
            <text>钱包</text>
          </navigator>
          <navigator class="item" url="/pages/circle/manage" hover-class="none">
            <text>{{ cardData.myFriendsNumber }}</text>
            <text>圈子</text>
          </navigator>
          <navigator
            class="item"
            open-type="navigate"
            url="/pages/contacts/contacts"
            hover-class="none"
            @tap="toParam"
          >
            <text>{{ cardData.h5FriendNumber }}</text>
            <text>好友</text>
          </navigator>
          <navigator
            class="item"
            url="/pages/per_center/release"
            hover-class="none"
          >
            <text>{{ cardData.postNumber }}</text>
            <text>帖子</text>
          </navigator>
        </view>
      </view>
    </view>
    <view class="option">
      <view class="each">
        <view class="option-left">
          <image
            src="../../images/mine/icon1.png"
            class="icon"
            mode="widthFix"
          ></image>
        </view>
        <view class="option-right" @tap="toLayer(1)">
          <view class="o-r-top">
            <view class="text">提现</view>
            <view class="icon-right">
              <image src="../../images/mine/right.png" mode="widthFix"></image>
            </view>
          </view>
          <view class="line"></view>
        </view>
      </view>
      <view class="each">
        <view class="option-left">
          <image
            src="../../images/mine/icon2.png"
            class="icon"
            mode="widthFix"
          ></image>
        </view>
        <navigator
          class="option-right"
          :url="'/pages/mine/setOption?isShow=' + cardData.isTelphone"
          hover-class="none"
        >
          <view class="o-r-top">
            <view class="text">设置</view>
            <view class="icon-right">
              <image src="../../images/mine/right.png" mode="widthFix"></image>
            </view>
          </view>
          <view class="line"></view>
        </navigator>
      </view>
      <!-- <view class="each">
				<view class="option-left">
					<image src="../../images/mine/icon3.png" class="icon" mode="widthFix"></image>
				</view>
				<navigator class="option-right" url="" hover-class="none">
					<view class="o-r-top">
						<view class="text">关于</view>
						<view class="icon-right">
							<image src="../../images/mine/right.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="line"></view>
				</navigator>
			</view> -->
      <view class="each">
        <view class="option-left">
          <image
            src="../../images/mine/icon4.png"
            class="icon"
            mode="widthFix"
          ></image>
        </view>
        <navigator
          class="option-right"
          :url="'/pages/per_center/collection?id=' + cardData.id"
          hover-class="none"
        >
          <view class="o-r-top">
            <view class="text">我的收藏</view>
            <view class="icon-right">
              <image src="../../images/mine/right.png" mode="widthFix"></image>
            </view>
          </view>
          <view class="line"></view>
        </navigator>
      </view>
      <view class="each">
        <view class="option-left">
          <image
            src="../../images/mine/icon5.png"
            class="icon"
            mode="widthFix"
          ></image>
        </view>
        <navigator
          class="option-right"
          url="/pages/webGoods/myOrder"
          hover-class="none"
        >
          <view class="o-r-top">
            <view class="text">我的订单</view>
            <view class="icon-right">
              <image src="../../images/mine/right.png" mode="widthFix"></image>
            </view>
          </view>
          <view class="line"></view>
        </navigator>
      </view>
      <view class="each">
        <view class="option-left">
          <image
            src="../../images/mine/icon6.png"
            class="icon"
            mode="widthFix"
          ></image>
        </view>

        <!-- 我的商品 -->
        <view
          class="option-right"
          v-if="openApp.iswx == 'wx' && openApp.phone == 'Android'"
        >
          <view class="o-r-top">
            <view class="toapp_">
              <!-- <view class="text">我的商品</view> -->
              <wx-open-launch-app
                id="launch-btn"
                class="text"
                appid="wx8737e94836340f56"
                @error="openApp.handleErrorFn"
                @launch="openApp.handleLaunchFn"
                :extinfo="extinfoid"
              >
                <script type="text/wxtag-template">
                  <style>
                                             	.btn {
                                             		font-size: 15px;
                                             		display: inline-block;
                                             		width: 260px;
                                             		font-weight: 400;
                                             		color: #000000;
                                             	}
                                             </style>
                                             <view class="btn">我的商品</view>
                </script>
              </wx-open-launch-app>
            </view>
            <view class="icon-right">
              <image src="../../images/mine/right.png" mode="widthFix"></image>
            </view>
          </view>
          <view class="line"></view>
        </view>

        <view
          class="option-right"
          @tap="handleApp"
          v-if="openApp.phone == 'ios'"
        >
          <view class="o-r-top">
            <view class="text">我的商品</view>
            <view class="icon-right">
              <image src="../../images/mine/right.png" mode="widthFix"></image>
            </view>
          </view>
          <view class="line"></view>
        </view>
      </view>
      <view class="each">
        <view class="option-left">
          <image
            src="../../images/mine/icon7.png"
            class="icon"
            mode="widthFix"
          ></image>
        </view>
        <navigator
          class="option-right"
          url="/pages/webGoods/receiverAddress"
          hover-class="none"
        >
          <view class="o-r-top">
            <view class="text">收货地址</view>
            <view class="icon-right">
              <image src="../../images/mine/right.png" mode="widthFix"></image>
            </view>
          </view>
          <view class="line"></view>
        </navigator>
      </view>
      <view class="each">
        <view class="option-left">
          <image
            src="../../images/mine/icon8.png"
            class="icon"
            mode="widthFix"
          ></image>
        </view>
        <navigator
          class="option-right"
          url="/pages/index/bindApp"
          hover-class="none"
        >
          <view class="o-r-top">
            <view class="text">APP账号绑定</view>
            <view class="icon-right">
              <image src="../../images/mine/right.png" mode="widthFix"></image>
            </view>
          </view>
          <view class="line"></view>
        </navigator>
      </view>
      <view class="each">
        <view class="option-left">
          <image
            src="../../images/mine/icon9.png"
            class="icon"
            mode="widthFix"
          ></image>
        </view>
        <navigator
          class="option-right"
          url="/pages/per_center/feedback"
          hover-class="none"
        >
          <view class="o-r-top">
            <view class="text">意见反馈</view>
            <view class="icon-right">
              <image src="../../images/mine/right.png" mode="widthFix"></image>
            </view>
          </view>
          <!-- <view class="line"></view> -->
        </navigator>
      </view>
    </view>
    <view class="layer" v-show="layer == 1">
      <view class="mask"></view>
      <view class="layer-content">
        <view class="close" @tap="toLayer(0)">
          <image src="../../images/mine/cha.png" mode=""></image>
        </view>
        <view class="info">
          <view class="h3">提现</view>
          <view class="text"> 请通过"一起来往"小程序，发起提现 </view>
        </view>
        <view class="btn-box">
          <view class="btn" @tap="toLayer(0)"> 知道了 </view>
        </view>
      </view>
    </view>
    <!-- 底部tab栏 -->
    <view class="footer_tabar">
      <navigator
        class="item_tabar"
        url="/pages/index/index"
        hover-class="none"
        open-type="reLaunch"
      >
        <image src="../../static/image/quanzi.png" mode="aspectFill"></image>
        <text>圈子</text>
      </navigator>
      <navigator
        class="item_tabar"
        url="/pages/contacts/contacts"
        hover-class="none"
        open-type="reLaunch"
      >
        <image src="../../static/image/renmai.png" mode="aspectFill"></image>
        <text>人脉</text>
        <view class="hongdian" v-if="newestNoRen"> </view>
      </navigator>
      <view class="item_tabar">
        <image src="../../static/image/mine1.png" mode="aspectFill"></image>
        <text class="choose">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
import "../../utils/toApp.js";
let jweixin = require("jweixin-module"); //引入配置
export default {
  data() {
    return {
      cardData: {},
      id: "",
      extinfoid: "", //安卓分享的链接
      layer: 0,
      newestNoRen: false,
      money: 0,
    };
  },
  onLoad(options) {
    // this.getToken();
    // if(options.id){
    this.huoquId();
    // }
    this.card();
  },
  onShow() {
    this.card();
    this.configWeiXin();
    this.newYouOne(); //人脉通知
  },
  methods: {
    newYouOne() {
      //人脉是否有新好友通知
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        this.request({
          url: "h5/social/newest",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {},
        }).then((res) => {
          // console.log(res, '好友')
          if (res.data.code == 200) {
            if (res.data.data.unreadCount != 0) {
              this.newestNoRen = true;
            } else {
              this.newestNoRen = false;
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    toParam() {
      uni.setStorageSync("contacts", 2);
    },
    toLayer(n) {
      this.layer = n;
    },
    configWeiXin() {
      //获取公众号配置
      let token = uni.getStorageSync("token");
      this.request({
        //获取appid
        url: "h5/login/jsapiSignature",
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: {
          url: window.location.href.split("#")[0], //后台通过域名进行授权
        },
      }).then((res) => {
        if (res.statusCode == 200) {
          //获取成功
          jweixin.config({
            debug: false, // 开启调试模式，发布的时候改为false
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"], // 必填，需要使用的JS接口列表
            openTagList: ["wx-open-launch-app"],
          });
          jweixin.ready(function () {});
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });

      if (this.openApp.iswx == "wx" && this.openApp.phone == "Android") {
        this.extinfoid = `yqlw://yilaiwang.com/openDetail?jumpType=18&serviceId=''&type=1&orgId=''&content=''`;
      }
      // console.log(this.extinfoid)
    },
    getToken() {
      let token = uni.getStorageSync("token");
      this.request({
        url: "h5/loginapptoken/getOpenId", //拿oponid
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: {
          code: "091SSH00007rPK1Jyb4006QPB62SSH0I",
        },
      }).then((res) => {
        uni.setStorageSync("token", res.data.data.token);
      });
    },
    handleApp() {
      uni.showModal({
        title: "前往APP",
        content: "即将离开微信，打开“一起来往”查看我的商品列表",
        confirmText: "允许",
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: "加载中，请稍等~",
            });
            setTimeout(function () {
              uni.hideLoading();
            }, 3000);
            var url = window.location.href.split("&code")[0];
            window.history.pushState({}, 0, url);
            this.openApp.toApps(18, "", 1, "", "");
          }
        },
      });
    },
    toCard() {
      uni.navigateTo({
        url: "/pages/index/personal?id=" + this.id + "&type=1",
      });
    },
    card() {
      let token = uni.getStorageSync("token");
      const that = this;
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        this.request({
          url: "h5/home/myHomePage?uid=",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          method: "POST",
          data: {},
        }).then((res) => {
          if (res.data.code == 200) {
            that.cardData = res.data.data;
            that.money = that.add(
              res.data.data.balance,
              res.data.data.notReceivedBalance
            );
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    add(a, b) {
      let that = this;
      var c, d, e;
      try {
        c = a.toString().split(".")[1].length;
      } catch (f) {
        c = 0;
      }
      try {
        d = b.toString().split(".")[1].length;
      } catch (f) {
        d = 0;
      }
      return (
        (e = Math.pow(10, Math.max(c, d))),
        (this.mul(a, e) + this.mul(b, e)) / e
      );
    },
    mul(a, b) {
      var c = 0,
        d = a.toString(),
        e = b.toString();
      try {
        c += d.split(".")[1].length;
      } catch (f) {}
      try {
        c += e.split(".")[1].length;
      } catch (f) {}
      return (
        (Number(d.replace(".", "")) * Number(e.replace(".", ""))) /
        Math.pow(10, c)
      );
    },
    huoquId() {
      let token = uni.getStorageSync("token");
      const that = this;
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        this.request({
          url: "h5/userInformation/getNewOtherBusinessCard",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            viewUid: "",
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.id = res.data.data.id;
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.footer_tabar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100rpx;
  width: 750rpx;
  background: #f7f7f7;
  box-shadow: 0px 1rpx 0px 0px #dddddd inset;
  z-index: 998;

  .item_tabar {
    width: 33.333%;
    display: flex;
    flex-direction: column;
    align-items: center;

    // justify-content: space-around;
    image {
      margin-top: 8rpx;
      width: 54rpx;
      height: 54rpx;
    }

    text {
      font-size: 20rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #111;
    }

    .hongdian {
      width: 16rpx;
      height: 16rpx;
      background: #db361f;
      border-radius: 50%;
      position: absolute;
      top: 10rpx;
      right: 338rpx;
    }

    .choose {
      color: #0f6ede;
    }
  }
}

.main {
  padding-bottom: 100rpx;

  .toapp_ {
    width: 550rpx;
    font-size: 28rpx;
    color: #000;
  }

  .card-head {
    position: relative;
    width: 100%;
    height: 440rpx;
    padding: 0 36rpx;
    box-sizing: border-box;
    .bg {
      position: absolute;
      top: 0rpx;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .card-edit {
      text-align: right;
      height: 73rpx;
      position: relative;
      right: -36rpx;
      .toEdit {
        font-size: 24rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #ffffff;
        line-height: 33rpx;
        padding: 20rpx 16px 0 36rpx;
        display: inline-block;
      }
    }
    .info {
      // width: 678rpx;
      background: #ffffff;
      border-radius: 8rpx;
      margin: auto;
      .info-top {
        display: flex;
        .avatar {
          width: 120rpx;
          min-width: 120rpx;
          height: 120rpx;
          border-radius: 8rpx;
          margin: -21rpx 20px 0 18rpx;
        }
        .info-right {
          padding-right: 18rpx;
          .h3 {
            font-size: 36rpx;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            color: #000000;
            margin: 14rpx 0 2rpx;
          }
          .h6 {
            font-size: 24rpx;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            color: #7b7b7b;
            line-height: 33rpx;
            .company {
              margin-right: 10rpx;
            }
            .poster {
              height: 32rpx;
              background: #f1f8ff;
              border-radius: 4px;
              padding: 3rpx 2rpx;
              font-size: 22rpx;
              color: #0b68d4;
              line-height: 30rpx;
            }
          }
        }
      }
      .info-center {
        box-sizing: border-box;
        width: 642rpx;
        display: flex;
        align-items: center;
        padding: 34rpx 62rpx 35rpx 0;
        margin-left: 18rpx;
        box-shadow: 0px -1rpx 0px 0px #eeeeee inset;
        image {
          width: 34rpx;
          height: 34rpx;
          margin-right: 12rpx;
        }
        text {
          font-size: 28rpx;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #111111;
        }
      }
      .info-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24rpx 62rpx 32rpx 36rpx;
        .item {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          text:first-child {
            font-size: 38rpx;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            color: #000000;
            line-height: 53rpx;
            margin-bottom: 4rpx;
          }

          text:last-child {
            font-size: 26rpx;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: center;
            color: #7b7b7b;
            line-height: 37rpx;
          }
        }
      }
      .info-bottom-v {
        padding-top: 46rpx;
      }
    }
  }
  .card-head-v {
    height: 380rpx;
  }
  .option {
    margin-top: 7rpx;
    .each {
      padding-left: 36rpx;
      display: flex;
      align-items: center;
      .option-left {
        width: 61rpx;
        min-width: 61rpx;
        image {
          width: 40rpx;
        }
      }
      .option-right {
        flex: 1;
        .o-r-top {
          height: 122rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .text {
            font-size: 30rpx;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            color: #000000;
          }

          .icon-right {
            width: 10rpx;
            padding: 20rpx 36rpx;

            image {
              width: 100%;
            }
          }
        }

        .line {
          // width:617rpx;
          margin-right: 36rpx;
          height: 1px;
          background: #dddddd;
        }
      }
    }
  }

  .layer {
    .mask {
      position: fixed;
      display: inline-block;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.4);
      z-index: 999;
    }

    .layer-content {
      background: #ffffff;
      width: 540rpx;
      border-radius: 16rpx;
      -webkit-box-shadow: 0 2rpx 16rpx 0 rgba(0, 0, 0, 0.06);
      box-shadow: 0 2rpx 16rpx 0 rgba(0, 0, 0, 0.06);
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      z-index: 999;

      .close {
        text-align: right;
        padding: 26rpx 24rpx 0;

        image {
          width: 23rpx;
          height: 23rpx;
        }
      }

      .info {
        .h3 {
          text-align: center;
          font-size: 36rpx;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          text-align: center;
          color: #111111;
          margin: 5rpx 0 25rpx;
        }

        .text {
          font-size: 28rpx;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: center;
          color: #111111;
          line-height: 40rpx;
          padding: 0 42rpx;
        }
      }

      .btn-box {
        padding: 60rpx 45rpx 80rpx;

        .btn {
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
          background: #0f6ede;
          font-size: 30rpx;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: center;
          color: #ffffff;
          border-radius: 8px;
        }
      }
    }
  }
}
</style>
